<template>
  <div>
    <!-- 头部 -->
    <a-button style="margin-bottom: 20px" type="primary" @click="add('')" class="d-a-center">新增</a-button>

    <!-- 列表 -->
    <a-table :columns="columns" :data-source="renderData" bordered :loading="loading" :pagination="pagination" @change="handleTableChange">
      <!-- :scroll="{ y: 540,x:'auto' }" -->

      <template #operation="{ record }">
        <a-button type="link" @click="add(record.id)">编辑</a-button>
        <a-button type="link" danger @click="del(record.id)">删除</a-button>
      </template>
    </a-table>

    <!-- 新增编辑角色 -->
    <addModal v-model:visible="visible" :id="id" @closeModal="closeFun" />
  </div>
</template>
<script>
import { reactive, ref, watch, computed, createVNode, toRefs } from 'vue'
import { Modal, notification, message } from 'ant-design-vue'
import { columnsArr, orderListStatusObj, statusListArr, dataObj, statusColorObj } from './data'
import addModal from './components/addModal.vue'
import { addressBookList, deleteAddressBook } from '@/api/setting/index'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { useTable, useModal } from '@/hooks'

export default {
  components: {
    addModal
  },
  setup() {
    // 状态列表

    const columns = columnsArr

    const data = reactive(dataObj)
    // 选择时间
    const panelChange = (date, dateString) => {
      formModel.value.startTime = dateString[0]
      formModel.value.endTime = dateString[1]
    }

    //必须有括号 建议箭头函数 防止深拷贝
    const getParams = () => ({})

    const { renderData, formModel, loading, pagination, handleSearch, handleTableChange } = useTable({
      api: addressBookList,
      getParams
    })

    handleSearch(1)

    //  删除
    const del = id => {
      const { closeModal } = useModal.confirm({
        title: '确定删除当前成员吗?',
        icon: createVNode(ExclamationCircleOutlined),
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk: async () => {
          let res = await deleteAddressBook({ id })
          closeFun()
          closeModal()
        }
      })
    }
    // 查看
    const add = id => {
      data.id = id
      data.visible = true
    }

    const closeFun = () => {
      // data.id = ""
      // data.visible = false
      handleSearch()
    }
    return {
      ...toRefs(data),
      columns,
      renderData,
      formModel,
      loading,
      pagination,
      handleSearch,
      handleTableChange,
      add,
      labelCol: {
        style: {
          fontWeight: 'bolder'
        }
      },
      closeFun,
      del
    }
  }
}
</script>
<style scoped lang="less">
.search {
  background-color: #e6e6e6;
  padding-left: 20px;
  margin-bottom: 20px;
}
</style>
